<template>
  <div class="form-view-block form-logistics-content">
    <div class="form-item bbx-form-cell-item">
      <label class="form-item-label">
        {{$t('common.base.logisticsCompany')}}
        <span class="form-item-required" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-view-row-company">
        <el-select
          class="logistics-select"
          v-model="companyId"
          @change="changeCompany"
          filterable
          clearable
          :disabled="disabled"
        >
          <el-option
            v-for="option of logisticsCompany"
            :key="option.id"
            :label="option.name"
            :value="option.id"
          ></el-option>
        </el-select>
      </div>
      <div class="err-msg-wrap"></div>
    </div>
    <div class="form-item bbx-form-cell-item">
      <label class="form-item-label">
        {{$t('common.base.logisticsNo')}}
        <span class="form-item-required" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-item-control">
        <el-input
          class="logistics-input"
          type="text"
          v-model="no"
          :disabled="disabled"
          @input="update"
        ></el-input>
      </div>
      <div class="err-msg-wrap"></div>
    </div>
    <div class="form-item bbx-form-cell-item logistics-phone" v-if="isShowEndPhone && isShowPhoneField">
      <label class="form-item-label"><span class="form-item-required">*</span>{{$t('common.base.afterPhone', {data1:4})}}<el-tooltip class="item" effect="dark" :content="$t('common.form.tip.logistics.tips1')" placement="top-start">
          <i class="el-icon-question mar-l-8"></i>
        </el-tooltip></label>
      <div class="form-item-control flex-row">
        <el-input
          class="logistics-input"
          type="text"
          v-model="phone"
          :disabled="disabled"
          @input="update"
          show-word-limit
          maxlength="4"
        ></el-input>
        
      </div>
      <!-- <div class="err-msg-wrap"></div> -->
    </div>
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';
import propSet from '@src/component/form/components/props';
import { getLogisticsCompanyList } from '@src/api/FieldApi';

export default {
  name: 'form-logistics',
  mixins: [FormMixin],
  props: {
    value: propSet.arrayValue,
    isShowPhoneField: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      logisticsCompany: [],
      companyId: undefined,
      company: null,
      phone: '',
      no: '',
      isShowEndPhone: false
    };
  },
  watch: {
    value(v) {
      // 外部更新数据
      if (v.length) {
        this.init();
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { company, no, phone } = this.value?.[0] || {};
      const { dataSource, dataSourceType, defaultValue } = this.field.setting;
      this.company = company;
      this.no = no;
      this.phone = phone || '';


      if (dataSourceType === 0) {
        // 全部物流公司
        await this.fetchLogisticsCompany();
      } else {
        // 指定物流公司
        this.logisticsCompany = Object.freeze(dataSource);
      }
      // 选中已有的物流公司或者默认物流公司
      this.companyId = (company && company.id) || (defaultValue && defaultValue.id);
      // 编辑的时候判断默认是否是顺丰
      this.companyId === 42 ? this.isShowEndPhone = true : this.isShowEndPhone = false;
      
      this.company = defaultValue
        ? this.logisticsCompany.find(v => v.id === defaultValue)
        : null;
    },
    // 选择
    changeCompany(e) {
      // 顺丰快递显示手机号码后四位
      this.companyId === 42 ? this.isShowEndPhone = true : this.isShowEndPhone = false;
      this.update();
    },
    // 查询所有物流公司
    async fetchLogisticsCompany() {
      try {
        const list = await getLogisticsCompanyList();
        this.logisticsCompany = Object.freeze(list);
      } catch (error) {
        console.error('获取物流公司失败', error);
      }
    },
    /**
     * 更新物流信息
     */
    update() {
      const { companyId, no, value, field, logisticsCompany, phone, isShowEndPhone } = this
      const company = logisticsCompany.find(({ id }) => id === companyId)
      const newValue = isShowEndPhone ? [{ company, no, phone }] : [{ company, no }]

      this.$emit('update', {
        newValue,
        oldValue: value,
        field,
      })
      
    }
  }
};
</script>

<style lang="scss" scope>

.form-logistics-content {
  
  
  .form-view-row {
    flex: 1;
    width: 100%;
    padding-left: 0;
    padding-right: 0;

    label {
      margin-bottom: 8px;
      display: flex;
      align-items:       center;
      white-space: nowrap;
      color: $text-color-primary;
    } 
  }       

  .logistics-select {
    width: 100%;
  }
    
  .form-view-block {
    
    .form-view-row {
      
      label { 
        color: $text-color-primary;
      }
      
      &-company{
        width: 100%;
      }
      
    }
    
  } 

  .flex-row{
    display: flex;
    align-items: center;
    
    .el-icon-question{  
      margin-left: 10px;
      cursor: pointer;
    }
    
  }

  .logistics-phone {
    .el-input__suffix {
      right: 5px !important;
    }
  }
}
</style>
